<template>
  <yy-paging v-model="dataList" @query="queryList" ref="paging" :auto="automatic" @scroll="scrollMe" :refresher-enabled="false">
    <template #top>
      <u-navbar
        back-text=" "
        title="编辑"
        :background="{ backgroundColor: !isScroll ? '#FFFFFF' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
      </u-navbar>
    </template>
    <view class="flex flex-col gap-3 p-4">
      <!-- 头像 -->
      <!-- 头像 -->
      <!-- 头像 -->
      <view class="h-[48px] py-3 px-4 bg-[#FFFFFF] rounded-[12px] flex justify-between items-center">
        <view class="text-[16px] text-[#171B24]">头像</view>
        <view class="flex gap-2 items-center">
          <view class="size-[30px] bg-gray-300 rounded-full overflow-hidden" @click="uploadPictures">
            <image :src="vk.myfn.handleImageUrl(vk.vuex.get('$user.userInfo.avatar'))" class="size-full" mode="scaleToFill" />
          </view>
        </view>
      </view>

      <!-- 昵称 -->
      <!-- 昵称 -->
      <!-- 昵称 -->
      <view
        class="h-[48px] px-4 bg-[#FFFFFF] rounded-[12px] flex justify-between items-center"
        @click="vk.navigateTo('editNickname?nickname=' + vk.getVuex('$user.userInfo.nickname'))"
      >
        <view class="text-[16px] text-[#171B24]">昵称</view>
        <view class="flex gap-2 items-center">
          <view class="text-[14px] text-[#919499]">
            <view>{{ vk.getVuex('$user.userInfo.nickname') }} </view>
          </view>
          <view>
            <u-icon name="edit-pen" size="26" color="#606368"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false,
        dataList: [],
        automatic: false
      }
    },

    methods: {
      async uploadPictures() {
        try {
          const avatar = await vk.myfn.uploadImage({
            count: 1,
            topic: 'headPortrait'
          })
          let res = await api.editAvatar({ avatar })
          vk.toast(res.msg)
          if (!res.code) return
          vk.vuex.dispatch('$user/getUserInfo')
        } catch (err) {
          console.error('上传失败:', err)
        }
      },
      scrollMe(e) {
        this.isScroll = e.detail.scrollTop > 0
      },

      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      }
    }
  }
</script>

<style lang="scss" scoped></style>
